<template>
	<div class="chat-warp">
		<div class="right-warp" v-if="isMe">
			<div class="txt" v-if="messageType === 'text'">
				{{ message }}
			</div>
			<div class="pic" v-if="messageType === 'image'">
				<image @click="handlerPreviewImage" :lazy-load="true" mode="aspectFill" :src="message" alt="">
			</div>
			<div class="avatar">
				<image :src="avatar" alt="" :lazy-load="true">
			</div>
		</div>
		
		<div class="left-warp" v-if="!isMe">
			<div class="avatar">
				<image :src="avatar" alt="" :lazy-load="true">
			</div>
			<div class="txt" v-if="messageType === 'text'">
				{{ message }}
			</div>
      <div class="pic" v-if="messageType === 'image'">
				<image @click="handlerPreviewImage" :lazy-load="true" mode="aspectFill" :src="message" alt="">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			isMe: {
				type: Boolean,
				default: () => {
					return true;
				}
			},
			messageType: {
				type: String,
				default: () => {
					return 'text';
				},
				validator: (value) => {
					return ['text', 'image', 'voice', 'video'].indexOf(value) !== -1;
				}
			},
			avatar: {
				type: String,
				default: () => {
					return '';
				}
			},
			message: {
				type: String,
				default: () => {
					return '';
				}
			}
		},
		methods: {
			handlerPreviewImage() {
				uni.previewImage({
					urls: [this.message],
					current: this.message
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.chat-warp {
		width: 100%;
		padding: 20upx 0; 
		.right-warp {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			.txt {
				max-width: 520upx;
				border-radius: 4px;
				background: $uni-color-qian;
				box-sizing: border-box;
				padding: 12upx 14upx 12upx 12upx;
				font-size: 32upx;
				line-height: 55upx;
				color: #fff;
				position: relative;
				min-height: 58upx;
				&:after {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					top: 20upx;
					right: -28upx;
					border-top: 15upx solid transparent;
					border-right: 15upx solid transparent;
					border-bottom: 15upx solid transparent;
					border-left: 15upx solid $uni-color-qian;
				}
			}
			.pic {
				width: 520upx;
				border-radius: 4px;
				background: $uni-color-qian;
				box-sizing: border-box;
				padding: 12upx 14upx 12upx 12upx;
				font-size: 0;
				position: relative;
				min-height: 58upx;
				&:after {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					top: 20upx;
					right: -28upx;
					border-top: 15upx solid transparent;
					border-right: 15upx solid transparent;
					border-bottom: 15upx solid transparent;
					border-left: 15upx solid $uni-color-qian;
				}
				image {
					width: 100%;
				}
			}
			.avatar {
				width: 80upx;
				height: 80upx;
				margin-left: 25upx;
				font-size: 0;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.left-warp {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			.avatar {
				width: 80upx;
				height: 80upx;
				margin-right: 25upx;
				font-size: 0;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.txt {
				max-width: 520upx;
				border-radius: 4px;
				background: #f7f3f3;
				box-sizing: border-box;
				padding: 12upx 12upx 12upx 14upx;
				font-size: 32upx;
				line-height: 42upx;
				color: #000;
				position: relative;
				min-height: 58upx;
				// border: 1px solid #EBEBEB;
				&:after {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					top: 20upx;
					left: -28upx;
					border-top: 15upx solid transparent;
					border-right: 15upx solid #f7f3f3;
					border-bottom: 15upx solid transparent;
					border-left: 15upx solid transparent;
				}
			}
      .pic {
        width: 520upx;
				border-radius: 4px;
				background: $uni-color-qian;
				box-sizing: border-box;
				padding: 12upx 14upx 12upx 12upx;
				font-size: 0;
				position: relative;
				min-height: 58upx;
				&:after {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					top: 20upx;
					right: -28upx;
					border-top: 15upx solid transparent;
					border-right: 15upx solid transparent;
					border-bottom: 15upx solid transparent;
					border-left: 15upx solid $uni-color-qian;
				}
				image {
					width: 100%;
				}
      }
		}
	}
</style>
